<template>
  <div class="table-container">
    <el-table v-loading="loading" :data="tableData" border>
      <el-table-column label="序号" align="center" type="index" width="65" />
      <el-table-column
        label="项目名称"
        align="center"
        prop="name"
        :show-overflow-tooltip="true"
        width="244"
      />
      <el-table-column
        label="项目性质"
        align="center"
        prop="nature"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.nature == 0 ? "年度项目" : "增补项目" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目单位" align="center" prop="company" />
      <el-table-column
        label="项目类别"
        align="center"
        prop="type"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.type === '0'
              ? "建设类（新开工）"
              : scope.row.type === '1'
              ? "建设类（续建）"
              : scope.row.type === '2'
              ? "购买服务类"
              : scope.row.type === '3'
              ? "运维类"
              : "其他"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="投资估算(万元)"
        align="center"
        prop="investmentEstimation"
      />
      <el-table-column
        label="项目阶段"
        align="center"
        prop="stag"
      >
        <template slot-scope="scope">
          <!-- <span>{{
            scope.row.stag == "0"
              ? "项目申报"
              : scope.row.stag == "1"
              ? "方案申报"
              : scope.row.stag == "2"
              ? "项目实施"
              : scope.row.stag == "3"
              ? "项目验收"
              : "其他"
          }}</span> -->
          <span>{{ scope.row.stag }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="审核节点"
        align="center"
        prop="node"
        width="112"
        :show-overflow-tooltip="true"
      /> -->
      <el-table-column label="状态" align="center" width="120" prop="isState" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span :class="scope.row.isStateName|getIconClass" class="icon-state"><span></span></span>
          <span>{{ scope.row.isStateName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleView(scope.row)"
            v-show="scope.row.isState !== '-1'"
            >查看详情</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDataScope(scope.row)"
            v-show="scope.row.isState === '-1'"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-show="scope.row.isState === '-1'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  listMyManagement,
  getMyManagement,
  delMyManagement,
  addNotice,
  updateNotice,
} from "@/api/projectCompany/myProject";

function getIconClass(isStateName) {
  switch(isStateName) {
    case '待提交':
      return 'icon-default';
    case '待审批':
      return 'icon-red';
    case '已完成':
      return 'icon-blue';
    default:
      return 'icon-blue';
  }
}
export default {
  name: "TableData",
  props: {
    tableData: {
      type: Array,
      default: () => {},
    },
    isShow: {
      typeof: Boolean,
      default: true,
    },
    totalTo: {
      type: Number,
      default: 1,
    },
  },
  filters: {
    getIconClass,
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 分页
      pageSize: 10,
      pageNum: 1,
      total: 1,
      // 表格数据
      // tableData:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        type: undefined,
        nature: undefined,
        isState: undefined,
      },
    };
  },
  watch: {
    totalTo(newval, oldval) {
      this.total = newval; //newval为监听到发生改变数据
    },
  },
  created() {
    // this.$emit("getList")
  },
  methods: {
    /** 查询我的项目管理列表 */
    getList(queryParams) {
      this.loading = true;
      listMyManagement(queryParams).then((response) => {
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查看按钮操作 */
    handleView(row) {
      const proId = row.proId;
      this.$router.push({
        path: "/manage/myProject/myProjectView",
        query: { proId: proId },
      });
    },
    /** 编辑按钮操作 */
    handleDataScope(row) {
      const proId = row.proId;
      getMyManagement(proId).then((response) => {
        console.log("我的项目详情", response.SupplementaryDeclaration);
        if (row.nature == "1") {
          this.$router.push({
            path: "/projectCompany/supplementaryDeclaration",
            query: {
              proId: response.SupplementaryDeclaration.supplementaryId,
              supplementaryDeclaration: response.SupplementaryDeclaration,
            },
          });
        }
        if (row.nature == "0") {
          this.$router.push({
            path: "/projectCompany/annualReturn",
            query: {
              proId: response.AnnualDeclaration.annualId,
              annualDeclaration: response.AnnualDeclaration,
            },
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const proId = row.proId;
      this.$confirm("是否确认删除 ？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "del_box",
      })
        .then(function () {
          return delMyManagement(proId);
        })
        .then(() => {
          // this.getList();
          this.$emit("getList");
          this.msgSuccess("删除成功");
        });
    },
  },
};
</script>
<style scoped lang="scss">
.table-container {
  .el-pagination {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  // 状态样式
  .icon-state {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    position: relative;
    top: 3.5px;
    margin-right: 10px;
    span {
      display: inline-block;
      margin: 5px;
      width: 7px;
      height: 7px;
      border-radius: 16px;
    }
  }
  .icon-blue {
    background: rgba(49, 113, 238, 0.1);
    span {
      background: #3171ee;
    }
  }
  .icon-red {
    background: rgba(223, 32, 66, 0.1);
    span {
      background: #df2042;
    }
  }
  .icon-green {
    background: rgba(51, 168, 61, 0.1);
    span {
      background: #33a83d;
    }
  }
  .icon-orange {
    background: rgba(223, 130, 45, 0.1);
    span {
      background: #df822d;
    }
  }
  .icon-default{
    background: rgba(38, 35, 33, 0.1);
    span {
      background: #95918c;
    }
  }
}
</style>
<style lang="scss">
/* 删除弹出框样式 */
.del_box {
  width: 345px;
  height: 175px;
  .el-message-box__headerbtn {
    background: url("../../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-message-box__close {
      visibility: hidden;
    }
  }
  .el-message-box__content {
    padding: 26px 95px;
    font-size: 16px;
    .el-message-box__status.el-icon-warning {
      color: #ea4747;
    }
    .el-message-box__status + .el-message-box__message {
      padding-right: 0;
    }
  }
}
</style>
